<template>
    <view class="recommend-container">
        <!-- 推荐标题 -->
        <view class="recommend-header">
            <text class="recommend-title">相关推荐</text>
            <view class="refresh-btn" @click="refreshRecommend">
                <u-icon name="reload" size="30" color="#999"></u-icon>
                <text>换一批</text>
            </view>
        </view>

        <!-- 视频推荐列表 -->
        <scroll-view class="video-grid" scroll-y>
            <view class="video-list">
                <view v-for="(video, index) in videoList" :key="video.id" class="video-card"
                    @click="goToVideoDetail(video)">
                    <!-- 视频封面 -->
                    <view class="video-cover">
                        <image :src="video.cover" mode="aspectFill" />
                        <!-- 播放时长 -->
                        <view class="video-duration">{{ formatDuration(video.duration) }}</view>
                    </view>
                    <!-- 视频信息 -->
                    <view class="video-info">
                        <!-- 标题 -->
                        <text class="video-title">{{ video.title }}</text>

                        <!-- 底部信息 -->
                        <view class="video-meta">
                            <view class="meta-left">
                                <text class="video-author">{{ video.author }}</text>
                                <text class="video-time">{{ formatTime(video.publishTime) }}</text>
                            </view>
                            <view class="meta-right">
                                <!-- 点赞数 -->
                                <view class="like-count">
                                    <image src="/static/img/icon_like.png" mode="aspectFit" />
                                    <text>{{ formatCount(video.likeCount) }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 加载更多 -->
            <view v-if="hasMore" class="load-more" @click="loadMore">
                <text>加载更多</text>
            </view>

            <!-- 空状态 -->
            <view v-if="videoList.length === 0 && !loading" class="empty-state">
                <image src="/static/img/icon_video_empty.png" mode="aspectFit" />
                <text>暂无推荐视频</text>
            </view>

            <!-- 加载状态 -->
            <view v-if="loading" class="loading-state">
                <image src="/static/img/icon_loading.gif" mode="aspectFit" />
                <text>正在加载...</text>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

interface VideoItem {
    id: string
    title: string
    cover: string
    duration: number // 秒数
    viewCount: number
    likeCount: number
    author: string
    publishTime: string
    category: string
    tags: string[]
}

// 响应式数据
const videoList = ref<VideoItem[]>([])
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)

// 模拟视频数据
const mockVideos: VideoItem[] = [
    {
        id: '1',
        title: '高三语文',
        cover: '/static/images/bg03.png',
        duration: 1852, // 30分52秒
        viewCount: 12580,
        likeCount: 892,
        author: '语文小课堂',
        publishTime: '2024-01-15 10:30:00',
        category: '语文',
        tags: ['语文', '高中', '诗词']
    },
    {
        id: '2',
        title: '古诗词鉴赏',
        cover: '/static/images/bg03.png',
        duration: 2400, // 40分钟
        viewCount: 8960,
        likeCount: 654,
        author: '诗词小课堂',
        publishTime: '2024-01-14 15:20:00',
        category: '诗词',
        tags: ['诗词', '鉴赏', '诗词创作']
    },
    {
        id: '3',
        title: '高中数学',
        cover: '/static/images/bg03.png',
        duration: 1800, // 30分钟
        viewCount: 15200,
        likeCount: 1205,
        author: '高中数学小课堂',
        publishTime: '2024-01-13 09:15:00',
        category: '数学',
        tags: ['高中', '数学', '高中数学']
    },
    {
        id: '4',
        title: '高中物理',
        cover: '/static/images/bg03.png',
        duration: 2100, // 35分钟
        viewCount: 9800,
        likeCount: 743,
        author: '高中物理小课堂',
        publishTime: '2024-01-12 14:45:00',
        category: '物理',
        tags: ['高中', '物理', '高中物理']
    },
    {
        id: '5',
        title: '高中化学',
        cover: '/static/images/bg03.png',
        duration: 1500, // 25分钟
        viewCount: 7800,
        likeCount: 521,
        author: '高中化学小课堂',
        publishTime: '2024-01-11 11:30:00',
        category: '化学',
        tags: ['高中', '化学', '高中化学']
    },
    {
        id: '6',
        title: '高中生物',
        cover: '/static/images/bg03.png',
        duration: 2700, // 45分钟
        viewCount: 18900,
        likeCount: 1456,
        author: '高中生物小课堂',
        publishTime: '2024-01-10 16:20:00',
        category: '生物',
        tags: ['高中', '生物', '高中生物']
    }
]

// 格式化视频时长
const formatDuration = (seconds: number): string => {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 格式化观看数量
const formatViewCount = (count: number): string => {
    if (count >= 10000) {
        return `${(count / 10000).toFixed(1)}万`
    }
    return count.toString()
}

// 格式化数字
const formatCount = (count: number): string => {
    if (count >= 1000) {
        return `${(count / 1000).toFixed(1)}k`
    }
    return count.toString()
}

// 格式化发布时间
const formatTime = (timeStr: string): string => {
    const date = new Date(timeStr)
    const now = new Date()
    const diff = now.getTime() - date.getTime()

    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const minutes = Math.floor(diff / (1000 * 60))

    if (days > 0) return `${days}天前`
    if (hours > 0) return `${hours}小时前`
    if (minutes > 0) return `${minutes}分钟前`
    return '刚刚'
}

// 跳转到视频详情页
const goToVideoDetail = (video: VideoItem) => {
    console.log('跳转到视频详情:', video.id)
    // 这里可以实现页面跳转逻辑
    // uni.navigateTo({
    //   url: `/pages/videoDetail/index?id=${video.id}`
    // })
}

// 刷新推荐
const refreshRecommend = async () => {
    if (loading.value) return

    loading.value = true
    // 模拟API请求延迟
    setTimeout(() => {
        // 随机打乱视频顺序
        videoList.value = [...mockVideos].sort(() => Math.random() - 0.5)
        loading.value = false
        uni.showToast({
            title: '已更新推荐内容',
            icon: 'none'
        })
    }, 1000)
}

// 加载更多
const loadMore = async () => {
    if (loading.value || !hasMore.value) return

    loading.value = true
    currentPage.value++

    // 模拟加载更多数据
    setTimeout(() => {
        const moreVideos = mockVideos.map(video => ({
            ...video,
            id: `${video.id}-${currentPage.value}`
        }))

        videoList.value.push(...moreVideos)

        // 模拟没有更多数据
        if (currentPage.value >= 3) {
            hasMore.value = false
        }

        loading.value = false
    }, 1000)
}

// 获取推荐视频
const getRecommendVideos = async () => {
    loading.value = true

    // 模拟API请求
    setTimeout(() => {
        videoList.value = mockVideos
        loading.value = false
    }, 1500)
}

// 页面加载时获取推荐数据
onMounted(() => {
    getRecommendVideos()
})
</script>

<style lang="scss" scoped>
.recommend-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.recommend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .recommend-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .refresh-btn {
        display: flex;
        align-items: center;
        padding: 10rpx 20rpx;
        background-color: #f5f5f5;
        border-radius: 25rpx;

        image {
            width: 28rpx;
            height: 28rpx;
            margin-right: 8rpx;
        }

        text {
            font-size: 26rpx;
            color: #666;
        }
    }
}

.video-grid {
    flex: 1;
    // padding: 20rpx;
    height: calc(100% - 180rpx);
}

.video-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    overflow: hidden;
}

.video-card {
    height: 350rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;

    &:active {
        transform: scale(0.98);
    }
}

.video-cover {
    position: relative;
    width: 100%;
    height: 200rpx;
    overflow: hidden;

    image {
        width: 100%;
        height: 100%;
    }

    .video-duration {
        position: absolute;
        bottom: 10rpx;
        right: 10rpx;
        padding: 4rpx 8rpx;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        font-size: 22rpx;
        border-radius: 4rpx;
    }

    .play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60rpx;
        height: 60rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
            width: 30rpx;
            height: 30rpx;
            margin-left: 6rpx;
        }
    }

    .view-count {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        display: flex;
        align-items: center;
        padding: 4rpx 8rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 12rpx;

        image {
            width: 20rpx;
            height: 20rpx;
            margin-right: 4rpx;
        }

        text {
            font-size: 20rpx;
            color: #fff;
        }
    }
}

.video-info {
    padding: 20rpx;
}

.video-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28rpx;
    color: #333;
    line-height: 1.4;
    margin-bottom: 16rpx;
    height: 80rpx;
    width: 90%;
}

.video-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meta-left {
    flex: 1;
    min-width: 0;
}

.video-author {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 4rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-time {
    font-size: 22rpx;
    color: #999;
}

.meta-right {
    display: flex;
    align-items: center;
}

.like-count {
    display: flex;
    align-items: center;

    image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 4rpx;
    }

    text {
        font-size: 22rpx;
        color: #999;
    }
}

.load-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx;
    margin-top: 20rpx;

    text {
        font-size: 28rpx;
        color: #576b95;
    }
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;

    image {
        width: 120rpx;
        height: 120rpx;
        margin-bottom: 20rpx;
    }

    text {
        font-size: 28rpx;
        color: #999;
    }
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50rpx 0;

    image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 20rpx;
    }

    text {
        font-size: 26rpx;
        color: #999;
    }
}
</style>